<template>
  <div class="login-form">
    <div class="login-form-inner">
      <div class="login-form-title">登录</div>
      <div class="login-form-desc">请使用用户名和密码登录平台 ~</div>

      <div class="login-form-input-title">手机号</div>
      <div class="login-form-input-content">
        <el-input v-model="phone" placeholder="请输入" clearable></el-input>
      </div>

      <div style="height: 31px"></div>

      <div class="login-form-input-title">密码</div>
      <div class="login-form-input-content">
        <el-input
          v-model="password"
          type="password"
          placeholder="请输入"
          clearable
          @clear="isInputPasswordByUser = true"
          @input="isInputPasswordByUser = true"
          @change="isInputPasswordByUser = true"
        ></el-input>
      </div>

      <div class="login-form-opt">
        <div class="login-form-remember-me nas tse" @click="switchRememberMe()">
          <img v-if="isRememberMe" src="@/assets/product-color-checked.png" />
          <img v-else src="@/assets/product-color-checked-n.png" />
          <div>记住用户名</div>
        </div>
        <!-- <div class="login-form-forgot-password nas tse" @click="tapForgotPassword()">忘记密码 ?</div> -->
      </div>

      <div v-if="submitLoading" class="login-form-login-btn nac">
        <el-icon class="el-icon-loading"></el-icon>正在登录...
      </div>
      <div v-else class="login-form-login-btn nas tse" @click="toLogin()">登 录</div>

      <div class="login-form-sing-up-for-free nas tse" style="text-align: center" @click="toLoginUseGuest()">
        以游客身份进入 ~
      </div>

      <div class="login-form-desc-title">新用户?</div>
      <div class="login-form-desc-content">如果想要注册新用户，请点击下面的注册按钮。</div>

      <div class="login-form-sing-up-for-free nas tse" @click="tapSignUpForFree()">注 册</div>
    </div>
  </div>
</template>

<script>
import { login } from '@/api/api'

export default {
  name: 'loginForm',

  data() {
    return {
      submitLoading: false,

      isRememberMe: false,
      isInputPasswordByUser: false,

      phone: '',
      password: ''
    }
  },

  mounted() {
    this.isInputPasswordByUser = false

    if (this.$cookies.get('sqs_last_logined_remember') === 'yes') {
      this.isRememberMe = true

      if (this.$cookies.get('sqs_last_logined_account')) {
        this.phone = this.$cookies.get('sqs_last_logined_account')
      }

      if (this.$cookies.get('sqs_last_logined_password')) {
        this.password = this.$cookies.get('sqs_last_logined_password')
      }
    } else {
      this.isRememberMe = false
    }
  },

  methods: {
    switchRememberMe() {
      this.isRememberMe = !this.isRememberMe

      if (this.isRememberMe) {
        this.$cookies.set('sqs_last_logined_remember', 'yes')
      } else {
        this.$cookies.set('sqs_last_logined_remember', '')
        this.$cookies.set('sqs_last_logined_account', '')
        this.$cookies.set('sqs_last_logined_password', '')
      }
    },

    async toLogin() {
      if (!this.phone) {
        this.$toast('请输入手机号', {
          type: 'error'
        })
        return
      }

      if (!this.$isPhoneNo(this.phone)) {
        this.$toast('请输入正确的手机号', {
          type: 'error'
        })
        return
      }

      if (!this.password) {
        this.$toast('请输入密码', {
          type: 'error'
        })
        return
      }

      this.submitLoading = true
      const res = await login({
        phone: this.phone,
        password: this.isInputPasswordByUser ? this.$md5(this.password) : this.password
      }).catch(() => {
        this.submitLoading = false
      })
      this.submitLoading = false

      if (res && res.code === 200) {
        if (this.isRememberMe) {
          this.$cookies.set('sqs_last_logined_account', this.phone)

          if (this.isInputPasswordByUser) {
            this.$cookies.set('sqs_last_logined_password', this.$md5(this.password))
          } else {
            this.$cookies.set('sqs_last_logined_password', this.password)
          }
        }

        this.$store.dispatch('setAccount', this.phone)
        this.$store.dispatch('setToken', res.result.token)
        this.$store.dispatch('setAccountId', res.result.loginUserVo.id)
        this.$store.dispatch('setNickname', res.result.loginUserVo.nickname)
        this.$store.dispatch('setIsLogin', true)

        this.$toast('登录成功', {
          type: 'success'
        })

        this.$router.push('/')
      }
    },

    toLoginUseGuest() {
      this.$store.dispatch('setAccount', '')
      this.$store.dispatch('setToken', '')
      this.$store.dispatch('setAccountId', '')
      this.$store.dispatch('setNickname', '')
      this.$store.dispatch('setIsLogin', false)

      this.$router.push('/')
    },

    tapForgotPassword() {
      this.$emit('forgot')
    },

    tapSignUpForFree() {
      this.$emit('register')
    }
  }
}
</script>
<style lang="scss" scoped>
.login-form {
  width: 100%;

  display: flex;
  justify-content: center;

  .login-form-inner {
    width: 559px;

    .login-form-title {
      font-size: 32px;
      font-weight: 600;
      line-height: 24px;
      color: #0e2845;
    }

    .login-form-desc {
      margin-top: 31px;
      margin-bottom: 84px;
      font-size: 14px;
      font-weight: 500;
      line-height: 20px;
      color: #828698;
    }

    .login-form-input-title {
      font-size: 20px;
      font-weight: 400;
      line-height: 20px;
      color: #828698;
    }

    .login-form-input-content {
      margin-top: 21px;
      height: 72px;
      border: 1px solid #d7d8dd;
      border-radius: 8px;

      /deep/ .el-input__inner {
        border: 0px solid gray !important;
        border-radius: 8px !important;
        font-size: 20px !important;
        font-weight: 400 !important;
        line-height: 72px !important;
        height: 72px !important;
        color: #0e2845 !important;
      }

      /deep/ .el-input__suffix .el-input__clear {
        font-size: 20px !important;
        margin-right: 8px;
      }

      /deep/ .el-input__inner::placeholder {
        color: #cccccc;
      }
      /* 谷歌 */
      /deep/ .el-input__inner::-webkit-input-placeholder {
        color: #cccccc;
      }
      /* 火狐 */
      /deep/ .el-input__inner:-moz-placeholder {
        color: #cccccc;
      }
      /deep/ /*ie*/
          .el-input__inner:-ms-input-placeholder {
        color: #cccccc;
      }
    }

    .login-form-opt {
      margin-top: 34px;

      display: flex;
      align-items: center;
      justify-content: space-between;

      .login-form-remember-me {
        display: flex;
        align-items: center;

        font-size: 0;

        img {
          width: 16px;
          height: 16px;
        }

        div {
          margin-left: 8px;
          font-size: 14px;
          font-weight: 400;
          line-height: 20px;
          color: #828698;
        }
      }

      .login-form-forgot-password {
        font-size: 14px;
        font-weight: 400;
        line-height: 24px;
        color: #0b5596;
      }
    }

    .login-form-login-btn {
      margin-top: 55px;
      line-height: 72px;
      border-radius: 8px;
      text-align: center;
      font-size: 24px;
      font-weight: 600;
      color: #f7f7f7;
      background: #f4aa69;
    }

    .login-form-desc-title {
      margin-top: 62px;
      font-size: 16px;
      font-weight: 600;
      line-height: 24px;
      color: #0e2845;
    }

    .login-form-desc-content {
      font-size: 14px;
      font-weight: 400;
      line-height: 24px;
      color: #828698;
    }

    .login-form-sing-up-for-free {
      margin-top: 23px;
      font-size: 14px;
      font-weight: 400;
      line-height: 24px;
      color: #0b5596;
    }
  }
}
</style>
